<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 -->
            <el-header class="add-refresh">
                <el-button type="danger" @click="handleAdd">
                   <el-icon><Plus /></el-icon>
                   添加
                </el-button>
                <el-button type="info" @click="handleRefresh">
                   <el-icon><Refresh /></el-icon>
                   刷新
                </el-button>
            </el-header>

            <!-- 内容部分 -->
            <el-main>
                <!-- 表格内容 -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="name" label="名称" width="20%" />
                    <el-table-column prop="date" label="添加日期" width="20%" />
                    <el-table-column prop="state" label="状态" width="20%"/>
                    <el-table-column prop="note" label="备注" width="20%"/>
                    <el-table-column label="操作" width="20%" >
                        <template #default="scope">
                            <el-button 
                            class="edit"
                            size="small" 
                            type="primary" 
                            @click="handleEdit(scope.$index, scope.row)"
                            >
                            <el-icon><Edit /></el-icon>
                            编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页器-->
                <el-footer>
                    <div class="demo-pagination-block">
                        <el-pagination
                        v-model:current-page="currentPage4"
                        v-model:page-size="pageSize4"
                        :page-sizes="[100, 200, 300, 400]"
                        :size="size"
                        :disabled="disabled"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        />
                    </div>
                </el-footer>
            </el-main>
        </el-container>

        <!-- 添加/编辑对话框 -->
        <el-dialog
            :title="dialogTitle"
            v-model="dialogVisible"
            width="500px"
            :before-close="handleClose"
        >
            <el-form
                :model="form"
                :rules="rules"
                ref="formRef"
                label-width="80px"
            >
                <!-- 上一级下拉框 -->
                <el-form-item label="上一级">
                    <el-select v-model="form.parent" placeholder="请选择" style="width: 100%">
                        <el-option label="请选择" value=""></el-option>
                        <el-option 
                            v-for="item in parentOptions" 
                            :key="item.value" 
                            :label="item.label" 
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>

                <!-- 名称输入框 -->
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入栏目名称" />
                </el-form-item>

                <!-- 状态选择 -->
                <el-form-item label="状态">
                    <el-radio-group v-model="form.state">
                        <el-radio label="启用">启用</el-radio>
                        <el-radio label="禁用">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- 备注 -->
                <el-form-item label="备注">
                    <el-input
                        type="textarea"
                        :rows="3"
                        v-model="form.note"
                        placeholder="请输入备注"
                    />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="handleConfirm">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 对话框显示控制
const dialogVisible = ref(false)
// 表单引用
const formRef = ref()
// 当前编辑的索引
const currentEditIndex = ref(-1)

// 表单数据
const form = reactive({
    parent: '',
    name: '',
    state: '启用',
    note: ''
})

// 表单验证规则
const rules = reactive({
    name: [
        { required: true, message: '请输入栏目名称', trigger: 'blur' }
    ]
})

// 上一级下拉框选项
const parentOptions = ref([
    { label: '视频', value: 'video' },
    { label: '序启服务商', value: 'service' },
    { label: '序启回收', value: 'recycle' },
    { label: '用户协议', value: 'agreement' },
    { label: '政策支持', value: 'policy' },
    { label: '公司简介', value: 'company' }
])

// 对话框标题（根据添加/编辑显示不同标题）
const dialogTitle = computed(() => {
    return currentEditIndex.value === -1 ? '添加栏目' : '编辑栏目'
})

// 表格数据
const tableData = ref([
    {
        name: '视频',
        date: '2025.10.01',
        state: '启用',
        note: '',
    },
    {
        name: '序启服务商',
        date: '2025.10.02',
        state: '启用',
        note: '',
    },
    {
        name: '序启回收',
        date: '2025.10.03',
        state: '启用',
        note: '',
    },
    {
        name: '用户协议',
        date: '2025.10.04',
        state: '启用',
        note: '',
    },
    {
        name: '政策支持',
        date: '2025.10.05',
        state: '启用',
        note: '',
    },
    {
        name: '公司简介',
        date: '2025.10.06',
        state: '启用',
        note: '',
    },
])

// 添加按钮点击事件
const handleAdd = () => {
    // 重置表单
    resetForm()
    currentEditIndex.value = -1
    dialogVisible.value = true
}

// 编辑按钮点击事件
const handleEdit = (index, row) => {
    // 填充表单数据
    Object.assign(form, {
        parent: '',
        name: row.name,
        state: row.state,
        note: row.note
    })
    currentEditIndex.value = index
    dialogVisible.value = true
}

// 重置表单
const resetForm = () => {
    Object.assign(form, {
        parent: '',
        name: '',
        state: '启用',
        note: ''
    })
    if (formRef.value) {
        formRef.value.clearValidate()
    }
}

// 对话框关闭前的处理
const handleClose = (done) => {
    ElMessageBox.confirm('确定要关闭吗？')
        .then(() => {
            resetForm()
            done()
        })
        .catch(() => {
            // 取消关闭
        })
}

// 取消按钮点击事件
const handleCancel = () => {
    resetForm()
    dialogVisible.value = false
}

// 确定按钮点击事件
const handleConfirm = () => {
    if (!formRef.value) return

    formRef.value.validate((valid) => {
        if (valid) {
            if (currentEditIndex.value === -1) {
                // 添加操作
                const newItem = {
                    name: form.name,
                    date: new Date().toLocaleDateString('zh-CN').replace(/\//g, '.'),
                    state: form.state,
                    note: form.note
                }
                tableData.value.push(newItem)
                ElMessage.success('添加成功')
            } else {
                // 编辑操作
                tableData.value[currentEditIndex.value] = {
                    ...tableData.value[currentEditIndex.value],
                    name: form.name,
                    state: form.state,
                    note: form.note
                }
                ElMessage.success('编辑成功')
            }
            dialogVisible.value = false
            resetForm()
        } else {
            ElMessage.error('请填写完整信息')
        }
    })
}

// 刷新页面函数
const handleRefresh = () => {
    window.location.reload()
}
</script>

<style lang="less" scoped>
.el-header{
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}

/*添加/刷新部分*/
.add-refresh{
    width: 100%;
    border: none;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: right;
}

/*内容部分*/
.el-main{
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

::v-deep .el-table--fit{
    width: 98% !important;
}

/*数据表格部分*/
::v-deep .el-table .el-table__header {
    width: 100% !important;
}

::v-deep .el-table .el-table__body {
    width: 100% !important;
}

::v-deep .el-table .el-table__row {
    height: 80px;
}

/* 对话框样式调整 */
::v-deep .el-dialog__body {
    padding: 20px;
}

::v-deep .el-form-item {
    margin-bottom: 20px;
}

/*分页器*/
.el-footer{
    width: 98%;
    display: flex;
    justify-content: right;
    align-items: center;
}

</style>